<template>
    <div>
        <div :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <el-row v-if="bind">
                已绑定，解绑请联系管理员
            </el-row>
            <template v-if="!bind">
                <el-row>
                    <div>手动打开Google Authenticator(谷歌身份身份验证器)，扫描二维码 点击下载谷歌验证器</a></div>
                    <img :src="genUrl" />
                </el-row>
                <el-row>
                    <label>不能扫码？点击</label>
                    <el-button type="success" style="margin-left: 5px" size="small" @click="showKey">查看秘钥</el-button>手动添加
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-input placeholder="谷歌验证码" size="small" v-model="code" style="width: 200px" />
                    <el-button  size="small"  @click="doBind" type="success">绑定</el-button>
                </el-row>
            </template>
        </div>
    </div>
</template>
<script>
import api from '@/api/api';
export default {
    name: 'Merchant',
    data() {
        return {
            loading: false,
            bind: false,
            key: "",
            qrurl: "",
            code: "",

        };
    },
    mounted: function() {

        this.getDetail();

    },
    computed: {
        genUrl: function() {
            return api.qrApiUrl + this.qrurl;
        }
    },
    methods: {
        doBind: function() {
            var me = this;
            if (me.code == "") {
                me.errorMessage("请输入验证码");
                return;
            }

            me.$http.post("/merchant/dogoogle.do", { code: me.code }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("绑定成功");
                    me.getDetail();
                }

            }, response => {

            });
        },
        showKey: function() {
            var me = this;
            me.$Modal.info({
                title: "手动输入秘钥",
                content: me.key,
                onOk: function() {

                },
                onCancel: () => {

                }
            });
        },
        getDetail: function() {

            var me = this;
            me.showLoading();
            me.$http.post("/merchant/googleauth.do").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.bind = true;
                } else if (body.status == 3) {
                    me.bind = false;
                    me.key = body.info
                    me.qrurl = body.obj;
                } else {
                    me.errorMessage(body.info);
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        }

    }
}
</script>
<style scoped>
</style>